<template>
  <div>
    <van-sticky>
      <van-nav-bar class="lanse" title="黑马头条 - 登录就是注册!" />
    </van-sticky>
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写手机号' ,pattern:/^1[3|4|5|8][0-9]\d{4,8}$/}]"
      />
      <van-field
        v-model="user.pas"
        type="password"
        name="code"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写万能验证码' , pattern:/^\d{6}$/}]"
      />
<!-- <van-area title="标题" :area-list="list" value="110101" /> -->
      <div style="margin: 16px">
<van-uploader :after-read="afterRead"  v-model="fileList" multiple/>
        <van-button round block type="info" native-type="submit"
        :loading='isshou'  loading-text="加载中..." :disabled='isshou'
          >提交</van-button
        >
      </div>
    </van-form>

  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Toast } from 'vant'
import { loginAPI } from '../../api/index'
// import { test2 } from '../../api/index'
// import { bookListAPI } from '../../api/index'

export default {
  data () {
    return {
      user: {
        mobile: '13900002020',
        pas: '246810'
      },
      username: '',
      password: '',
      isshou: false,
      fileList: [

      ]

    }
  },
  // await接收成功和失败的结果
  async created () {
    // const [err, res] = await test2()
    // if (err) console.log('得登录')
    // else console.log(res)
  },
  methods: {
    ...mapMutations('user', ['huoqurefToken', 'huoquToken', 'huoquphone', 'huoqutupian']),

    async  onSubmit (values) {
      this.isshou = true
      const [err, res] = await loginAPI(values)
      this.isshou = false
      if (err) {
        return Toast.fail('登录失败')
      } else {
        Toast.success('登录成功')
        const { refresh_token, token } = res.data.data
        console.log(1)
        this.huoqurefToken(refresh_token)
        this.huoquToken(token)
        this.huoquphone(this.user.mobile)
        setTimeout(() => {
          this.$router.push('/')
        }, 100)
      }

      // 保存到vuex
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      this.huoqutupian(file.content)
      console.log(file.content)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar {
  background-color: #007bff;
  .van-nav-bar__title {
    color: white;
    font-size: 14px;
  }
}
/* // if (this.username.length === 0 && this.password.length === 0) {
//         Toast.fail('请输入用户名或密码')
//       } else {
//         console.log(values)
//         const text = /^1[3|4|5|8][0-9]\d{4,8}$/
//         // ^1[3|4|5|8][0-9]\d{4,8}$
//         // ^1代表以1开头，现在中国的手机号没有是其它开头的，以后不一定啊
//         // [3|4|5|8] 紧跟上面的1后面，可以是3或4或5或8的一个数字，如果以后出现190开始的手机号码了，就需要如下[3|4|5|8|9]
//         // [0-9]表示0-9中间的任何数字，可以是0或9
//         const aext = /^[a-z]\w{5,7}$/
//         // 输出 true
//         // 创建校验规则,密码要求6-8位，首位为字母，后面5-7位是数字
//         const a = text.test(this.username)
//         const b = aext.test(this.password)
//         if (a === false || b === false) {
//           Toast.fail('用户名或密码不对')
//         } else if (a && b === true) {
//           Toast.success('注册成功')
//         }
//       } */
</style>>
